<template>
  <div class="wrap">
    <div class="header">
      <i class="iconfont icon-zuo" @click="$router.push('/home/my')"></i>
      <h3>知心姐姐</h3>
      <img src="~@/assets/1.gif" alt="" />
    </div>
    <div class="main">
      <ul class="talk_list" style="top: 0px;">
        <li
          :class="{ right_word: index % 2 === 0, left_word: index % 2 !== 0 }"
          v-for="(item, index) in content"
          :key="index"
        >
          <img v-if="index % 2 === 0" src="@/assets/111.gif" />
          <img v-else src="~@/assets/1.gif" />
          <span>{{ item }}</span>
        </li>
      </ul>
      <div class="drag_bar" style="display: none;">
        <div
          class="drager ui-draggable ui-draggable-handle"
          style="display: none; height: 412.628px;"
        ></div>
      </div>
    </div>
    <div class="footer">
      <van-field v-model="value" center placeholder="说点什么吧">
        <template #button>
          <van-button
            size="small"
            color="#fe9697"
            type="primary"
            @click="inputValue"
            >发送
          </van-button>
        </template>
      </van-field>
    </div>
  </div>
</template>
<script>
import { tuLing } from '@/api/IM.js'
import { setLocal, getLocal } from '@/utils/Local.js'
export default {
  name: 'consult',
  data () {
    return {
      value: '', // 用户输入
      content: [] // 聊天内容
    }
  },
  methods: {
    async inputValue () {
      this.content.push(this.value)
      const res = await tuLing({
        key: '2162602fd87240a8b7bba7431ffd379b',
        info: this.value
      })
      this.content.push(res.data.text)
      setLocal('aaa', JSON.stringify(this.content))
      this.scrollToBottom()
      this.value = ''
    },

    scrollToBottom () {
      this.$nextTick(() => {
        const container = this.$el.querySelector('.main')
        container.scrollTop = container.scrollHeight
      })
    }
  },

  mounted () {
    if (this.content === null) {
      this.content = []
      this.content = JSON.parse(getLocal('aaa'))
      this.scrollToBottom()
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/assets/css/main.css';
</style>
